<script setup>
import useMessage from '@/hooks/useMessage';
import { computed } from 'vue';

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

const { jumpingPost, jumpingUser } = useMessage(props)


//动态头像宽度
const dynamicAvatar = computed(() => {
  return window.innerWidth > 768 ? 50 : 40;
})

//动态content :span
const dynamicContentSpan = computed(() => {
  return window.innerWidth > 768 ? 23 : 19;
})

//动态avatar :span
const dynamicAvatarSpan = computed(() => {
  return window.innerWidth > 768 ? 1 : 3;
})
// #endregion

</script>

<template>
  <div class="comment">
    <el-row class="row">
      <el-col :span="1" class="hidden-md-and-up"></el-col>
      <el-col :span="dynamicAvatarSpan" class="avatar">
        <el-avatar shape="circle" :size="dynamicAvatar" :src="list.avatar" />
      </el-col>
      <el-col :span="dynamicContentSpan" class="content">
        <div class="header">
          <div>
            <span @click="jumpingUser" class="name">{{ list.userName }}</span>
            <span class="reply">于{{ list.time }}收藏了你的帖子</span>
          </div>
        </div>

        <div class="post">
          <span @click="jumpingPost" class="post-name">{{ list.postTitle }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang='scss' scoped>
//电脑端样式
@media screen and (min-width: 768px) {
  .comment {
    border-bottom: $no-highlight-color solid 1px;

    &:hover {
      // 好看的hover效果
      transform: translateY(-2px);
    }

    .row {
      display: flex;
      align-items: center;


      .content {
        padding-left: 20px;



        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .name {
          margin-right: 30px;
          color: $highlight-color;

          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }

        .reply {
          color: $no-highlight-color;
        }

        .post {
          margin: 5px 0;
          display: flex;
          justify-content: space-between;

          .post-name {
            font-weight: bold;
            width: 85%;

            &:hover {
              text-decoration: underline;
              cursor: pointer;
            }
          }

          .time {
            color: $no-highlight-color;
          }

        }
      }

    }

  }
}

//手机端样式
@media screen and (max-width: 767px) {
  .comment {
    border-bottom: $no-highlight-color solid 1px;
    // border: 1px solid red;

    .row {
      display: flex;
      align-items: center;



      .content {

        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .name {
          margin-right: 10px;
          color: $highlight-color;
        }

        .reply {
          color: $no-highlight-color;
          font-size: 12px;
        }
      }

      .post-name {
        font-weight: bold;
      }

    }
  }
}
</style>